<template>
  <div style="width: 100%; height: 100%">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="产品名称">
        <el-input
          v-model="formInline.product_Name"
          placeholder="请输入产品名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
          v-model="formInline.model_Number"
          placeholder="请输入规格型号"
          clearable
        />
      </el-form-item>
      <el-form-item label="品牌">
        <el-input
          v-model="formInline.brand"
          placeholder="请输入品牌"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" height="820" border style="width: 1700px">
      <el-table-column
        prop="Product_Code"
        width="120"
        label="产品编号"
        align="center"
      >
      </el-table-column>
      <el-table-column
        width="120"
        prop="Product_Name"
        label="产品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        width="120"
        prop="Model_Number"
        label="规格型号"
        align="center"
      ></el-table-column>
      <el-table-column
        width="120"
        prop="Brand"
        label="品牌"
        align="center"
      ></el-table-column>
      <el-table-column prop="UnitName" width="120" label="单位" align="center">
      </el-table-column>
      <el-table-column
        prop="TypeName"
        class-name=""
        width="120"
        label="产品分类"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="AttName"
        width="120"
        label="产品属性"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="Unit_Price"
        width="120"
        label="销售单价"
        align="center"
      >
        <template v-slot="slot">
          <!-- 使用 row.UnitPrice 显示销售单价 -->
          <span style="color: red; font-weight: bold">
            {{ slot.row.Unit_Price.toFixed(2) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="Minimum_Stock_Quantity"
        label="最小库存数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="Maximum_Stock_Quantity"
        label="最大库存数"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="Product_Expiry_Date"
        label="产品有效期"
        align="center"
        width="120"
      >
        <template v-slot="slot">
          <!-- 使用 row.MatDate 显示日期 -->
          {{ slot.row.Product_Expiry_Date.substr(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="Alert_Days"
        label="报警天数"
        align="center"
      ></el-table-column>
      <el-table-column prop="Status" width="120" label="状态" align="center">
        <template v-slot="slot">
          <el-tag
            type="success"
            style="font-weight: bold"
            v-if="slot.row.Status == 1"
            ><span style="font-weight: bold; font-size: 10pt">
              启用
            </span></el-tag
          >
          <el-tag type="danger" v-else
            ><span style="font-weight: bold; font-size: 10pt">
              停用
            </span></el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="Remarks"
        label="备注"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="Product_Image"
        width="120"
        label="产品图片"
        align="center"
      >
        <template v-slot="slot">
          <img
            :src="'http://localhost:5055/PIC/' + slot.row.Product_Image"
            style="width: 55px; height: 55px"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="185" label="操作" align="center">
        <template v-slot="slot">
          <el-link type="primary" @click="handleEdit(slot.row.Product_Id)">
            编辑
          </el-link>
          &nbsp;
          <el-link type="danger" @click="handleDelete(slot.row.Product_Id)">
            删除 </el-link
          >&nbsp;
          <el-link type="primary" @click="handleDesc(slot.row.Product_Id)">
            查看产品详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <table style="margin: auto">
      <tr>
        <td>
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();

const tableData = ref([]);
const totalCount = ref(0);
const page = ref(1);
const size = ref(10);
const small = ref(true);
const disabled = ref(false);
const background = ref(true);
const units = ref([]); // 单位下拉列表数据
const materialTypes = ref([]); // 物料类别下拉列表数据
const materialProperties = ref([]); // 物料属性下拉列表数据
//const multipleSelection = ref<RuleForm[]>([]);

interface RuleForm {
  Product_Code: string;
  Product_Name: string;
  Model_Number: string;
  Brand: string;
  Unit_Id: string;
  Product_Category_Id: string;
  Product_Attributes_Id: string;
  Unit_Price: string;
  Minimum_Stock_Quantity: string;
  Maximum_Stock_Quantity: string;
  Product_Expiry_Date: string;
  Alert_Days: string;
  Status: string;
  Remarks: string;
  Product_Image: string;
  IsDelete: string;
}

const formInline = reactive({
  // 表单数据
  product_Name: "",
  model_Number: "",
  brand: "",
});

const handleEdit = (Product_Id: string) => {
  router.push("/UserList/productEdit?product_Id=" + Product_Id);
};

const handleDesc = (Product_Id: string) => {
  router.push("/UserList/productDesc?product_Id=" + Product_Id);
};

const fetchData = async () => {
  try {
    const response = await axios.get(
      `Product/GetUserListByKeyword?page=${page.value}&size=${size.value}&product_Name=${formInline.product_Name}&model_Number=${formInline.model_Number}&brand=${formInline.brand}`
    );
    if (response.data.Data && response.data.Data.length > 0) {
      tableData.value = response.data.Data;
      totalCount.value = response.data.TotalCount;
    } else {
      tableData.value = [];
      totalCount.value = 0;
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

const handleDelete = (Product_Id: string) => {
  // 处理删除
  ElMessageBox.confirm("确认要删除吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 在确认删除时执行的操作，例如调用后端接口删除文件
    axios
      .delete(`Product/DeleteData?product_Id=${Product_Id}`)
      .then((res) => {
        if (res.data.Code == 200) {
          ElMessage({
            type: "success",
            message: res.data.Message,
          });
          // 删除成功后刷新数据等操作
          fetchData();
        } else {
          ElMessage.error("删除失败");
        }
      })
      .catch(() => {
        ElMessage.error("删除失败");
      });
  });
};

const fetchDropdownData = async () => {
  try {
    const [unitsRes, materialTypesRes, materialPropertiesRes] =
      await Promise.all([
        axios.get("Materials/GetMatUnitInfoShow"),
        axios.get("Materials/GetMatTypeinfoShow"),
        axios.get("Materials/GetMatattrShow"),
      ]);
    units.value = unitsRes.data;
    materialTypes.value = materialTypesRes.data;
    materialProperties.value = materialPropertiesRes.data;
  } catch (error) {
    console.error("Error fetching dropdown data:", error);
  }
};

const handleSizeChange = (val) => {
  size.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  page.value = val;
  fetchData();
};

onMounted(() => {
  fetchData();
  fetchDropdownData();
});
</script>

<style>
</style>
